<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券-订单列表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="formBox">
        <form action="##" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <select name="Keyword" lay-verify="required">
                        <option value="">选择一级分类</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 0">
                    <input type="text" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-primary">搜索</button>
                <button class="layui-btn layui-btn-primary">
                    <img class="export" src="./images/export.png" alt="">
                    导出订单
                </button>

            </div>
        </form>
    </div>
    <div class="finance-record">
        <table class="layui-table">
            <colgroup>
                <col width="5%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>优惠券信息</th>
                <th>所属商家</th>
                <th>用户信息</th>
                <th>购买数量</th>
                <th>订单价格</th>
                <th>支付方式</th>
                <th>支付时间</th>
            </tr>
            </thead>
        </table>
        <table class="layui-table" v-for="(item,index) in orderList">
            <colgroup>
                <col width="5%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="10%">
                <col width="10%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <td colspan="2" style=" color: #337ab7;">订单用户记录查询</td>
                <td colspan="7">
                    <div class="operation">
                        <a href="">备注</a>
                    </div>
                </td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{item.number}}</td>
                <td>
                    <div class="coupon-title">
                        <p class="titleImg"><img :src="item.titleImg" alt=""></p>
                        <p>
                            <span>{{item.title}}</span><br>
                        </p>
                    </div>
                </td>
                <td>
                    <p>
                        <span>{{item.businessInfo}}</span><br>
                    </p>
                </td>
                <td>
                    <div class="coupon-title">
                        <p class="titleImg"><img :src="item.titleImg" alt=""></p>
                        <p>
                            <span>{{item.BelongedTo}}</span><br>
                            <span>{{item.phone}}</span><br>
                        </p>
                    </div>
                </td>
                <td>
                    {{item.num}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-xs btnBg">微信支付
                        </button>
                    </div>
                </td>
                <td>
                    <div>支付时间:{{item.time}}</div>
                </td>
            </tr>
            </tbody>
        </table>
        <div style="display: flex;justify-content: space-between;margin-top: 30px">
            <div id="test1"></div>
        </div>
    </div>
</div>
<div id="details" style="display: none;">
    <p class="com-details">这是详情</p>
    <h3>使用须知</h3>
    <p class="Notes">须知</p>
</div>
<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form', 'layer', 'laypage'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        var laypage = layui.laypage;

        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            orderList: [
                {
                    choose: false,
                    number: "2",
                    Sold: "50",
                    Stock: "100",
                    title: "优惠券标题",
                    titleImg: "./images/temporary.jpg",
                    num: "1245",
                    BelongedTo: '客服部',
                    phone: "17622223333",
                    businessInfo: "户县软面",
                    price: "免费",
                    Extract: '0.5%',
                    time: "2018-12-02 00:12:01",
                    state: 0,
                }, {
                    choose: false,
                    number: "2",
                    Sold: "50",
                    Stock: "100",
                    title: "代金券",
                    titleImg: "./images/temporary.jpg",
                    num: "1245",
                    BelongedTo: '客服部',
                    phone: "17622223333",
                    businessInfo: "户县软面",
                    price: "免费",
                    Extract: '0.5%',
                    time: "2018-12-02 00:12:01",
                    state: 0,
                }],
            nav: [],
            navIndex: -1,
            len: 0,
            list: [],
        },
        methods: {
            //查看详情
            seeDetails: function () {
                layer.open({
                    title: "卡劵详情",
                    type: 1,
                    area: ['420px', '260px'], //宽高
                    content: $("#details"),
                    btn: "确认"
                });
            },
            //小程序路径
            Route: function (index) {
                layer.msg('复制成功' + index)
            },
            //复制卡卷
            copy: function (index) {
                layer.confirm('确认复制该活动？被复制的优惠券会标记禁用', {
                    btn: ['确认', '取消']
                }, function () {
                    layer.msg('确认' + index)
                }, function () {
                    layer.msg('取消' + index)
                })
            },
            //复制链接
            copyHref: function (index) {
                layer.msg('复制成功' + index)
            },
            //失效
            operationstate: function (index) {
                layer.confirm('确定让这组优惠券失效?', {
                    title: "失效后将导致该优惠券无法被领取和编辑",
                    btn: ['确认', '取消']
                }, function () {
                    layer.msg('确认' + index)
                }, function () {
                    layer.msg('取消' + index)
                })
            }
        }
    })
</script>
</body>
</html>
